<template>
    <div class=" flex flex-col justify-between items-center w-full h-auto">
        <h1 class=" text-center bg-blue-300 w-full p-2 text-white rounded-b-lg">打卡</h1>
        <!-- <calendar class="  "></calendar> -->
        <myMap @address="getAddress"></myMap>
        <div class=" bg-blue-300 pb-5 w-screen rounded-t-lg  pt-2 pl-3 mt-2 items-center flex-1">
            <div class=" flex text-white">
                <span :class="isCheck === 0 ? 'mr-1 text-white' : 'mr-1 text-gray-400'" @click="isCheck = 0">今日打卡</span>
                <span :class="isCheck === 1 ? ' text-white' : ' text-gray-400'"
                    @click="router.push('/personal')">历史打卡</span>
            </div>
            <div :class="!isCard ? 'rounded-full bg-blue-500 w-10 h-10 text-center mt-2 ml-10 flex items-center justify-center hover:bg-blue-600 cursor-pointer' : 'rounded-full bg-blue-500 w-10 h-10 text-center mt-2 ml-10 flex items-center justify-center hover:bg-blue-600 cursor-not-allowed'
                " @click="checkCard" :disabled="false" >
                <div class="text-white">
                    {{ day }}
                </div>
            </div>
            <div class=" text-center">
                <span class="text-white mt-1 text-mid-size mr-6">{{ location }}</span>

            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import myMap from '@/components/phone/map/index.vue'
import { clockIn,getClockIn ,getCard } from '@/api'
import {useUserStore } from '@/store/useUserStore'
const userStore = useUserStore()
const day = ref(dayjs().format('HH:mm'))
const router = useRouter()
const isCheck = ref(0)
const isCard = ref(false)
const location = ref('未定位')
const getAddress = (val: string) => {
    console.log(val);
    location.value = val;
}
const checkCard = () => {

    if (isCard.value) {
        ElMessage({
            message: '今日已打卡',
            type: 'warning',
        })
    } else {
        //打卡
        clockIn(
            userStore.id
        //     {
        //     name:userStore.userName,
        //     location: location.value,
        //     time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        //     id: userStore.id
        // }
    ).then(res => {
            console.log(res);
            ElMessage({
                message: '打卡成功',
                type: 'success',
            })
        })

    }
    isCard.value = true
    day.value = '已打卡'

}
onMounted(()=>{
    getCard(userStore.id).then((res) => {
  console.log(res.data.data);
  const today = dayjs().format('YYYY-MM-DD');
  console.log(today);
  
const hasCheckedToday = res.data.data.find((item) => dayjs(item.signInTime).format('YYYY-MM-DD') === today);
        console.log(hasCheckedToday);
  if (!hasCheckedToday) {
    isCard.value = false;
    day.value = '打卡';
  } else {
    isCard.value = true;
    day.value = '已打卡';
  }
});

})
</script>

<style></style>